<template>
	<view class="center">
		<view class="logo" @click="goLogin()">
			<image class="logo-img" :src="avatarUrl"></image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{username}}</text>
				<text class="go-login navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">&#xe60f;</text>
				<text class="list-text" @click="mangement()">帐号管理</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item" >
				<text class="list-icon">&#xe639;</text>
				<text class="list-text" @click="logout()" >退出登录</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">&#xe60b;</text>
				<text class="list-text" @click="help()">帮助与反馈</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon">&#xe65f;</text>
				<text class="list-text" @click="mimi()">服务条款及隐私</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text" @click="about()">关于应用</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: "../../static/icon/logo.png",
				username:'',
			}
		},
		onShow() {
			var that = this;
			uni.getStorage({
			    key: 'username',
			    success: function (res) {
					if(res.data){
						that.username = res.data;
						that.avatarUrl = "../../static/icon/dfnh.png"
					}else{
						that.username = "您未登录"
					}
			    },
				fail: (err) => {
					console.log(err);
					that.username = '您未登录'
				},
				complete: (c) => {
				}
			});
		},
		methods: {
			goLogin() {
				this.$util.navigateTo('../login/login')
			},
			logout(){
				var that = this;
				uni.showModal({
					title:'确定要退出吗？',
					success: function(res){
						if (res.confirm){
							uni.removeStorage({
							    key: 'token',
							});
							uni.removeStorage({
							    key: 'username',
							});
							that.username = "您未登录"
							that.avatarUrl = "../../static/icon/logo.png"
							uni.showToast({
								title: '已退出',
								icon: 'none'
							})
						}
					}
				})
			},
			mangement(){
				var that = this;
				uni.getStorage({
				    key: 'token',
				    success: function (res) {
						if(res.data){
							that.$util.navigateTo('../regist/regist');
						}else{
							uni.showModal({
								content:'您未登录'
							})
						}
				    },
					fail: (err) => {
						console.log(err);
						uni.showModal({
							content:'您未登录'
						})
					},
					complete: (c) => {
					}
				});
			},
			help(){
				uni.showModal({
					content:'请致电xxxxxx'
				})
			},
			mimi(){
				uni.showModal({
					content:''
				})
			},
			about(){
				uni.showModal({
					content:''
				})
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('../../static/ttf/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #007AFF;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>